<template>
  <div class="tableConfig">

    <el-table
      v-if="isShowColumnTable"
      :data="columns"
      style="width: 100%"
      border
      height="450"
      row-key="id"
      @contextmenu.native="showMenu"
    >
      <el-table-column
        prop="visible"
        label="显示"
        width="55px"
      >
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.visible" @change="handleCheckedCitiesChange" />
        </template>
      </el-table-column>
      <el-table-column
        prop="sortable"
        label="排序"
        width="55px"
      >
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.sortable" @change="handleCheckedCitiesChange" />
        </template>
      </el-table-column>
      <el-table-column
        prop="sortable"
        label="固定"
        width="55px"
      >
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.fixed" @change="handleCheckedCitiesChange" />
        </template>
      </el-table-column>
      <el-table-column
        prop="label"
        label="字段名称"
      />
      <el-table-column
        prop="label"
        label="显示名称"
      >

        <template slot-scope="scope">
          <el-input v-model="scope.row.showName" />
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="字段类型"
      >
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" style="width: 100%" placeholder="请选择">
            <el-option
              v-for="item in options"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="dictionary"
        label="字典类型"
      >
        <template slot-scope="scope">
          <div class="flex" style="position: relative;height: 50px">
          <span v-if="scope.row.type == 3" >
            <el-select v-model="scope.row.dictionary" filterable>
              <el-option
                v-for="item in dictList"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </span>
            <div class="upPosition_box">
              <div class="upPosition" @click="upPosition(scope.$index,scope.row)">⬆</div>
              <div class="upPosition" @click="downPosition(scope.$index,scope.row)">⬇</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="width"
        label="宽度"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.width" />
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;display: flex;flex-direction: row-reverse;padding-top: 20px;padding-right: 50px"><el-button v-if="user.userId == 1 && user.companyCode === '000000'" type="primary" size="mini" @click="companyShow = true">同步</el-button><el-button type="primary" size="mini" @click="save">保存</el-button></div>
    <el-dialog
      title="选择公司"
      :visible.sync="companyShow"
      append-to-body
      style="width: 50%"
    >
      <z-select url="/api/dropDown/childSysCompanyList" multiple :value.sync="form.companyIds" />
      <div class="flex flex-reverse btnBox">
        <el-button type="primary" @click="submit">确定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { getDict1 } from '@/api/erp/tableColumnConfig'
import { syncHeaderPropertiesToChildCompany } from '@/api/erp/headerProperties'

export default {
  name: 'JTableColumnConfig',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    modelName: {
      type: String,
      default: null
    },
    headerInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      companyShow: false,
      options: [{
        value: '1',
        label: '普通'
      }, {
        value: '2',
        label: '时间'
      }, {
        value: '3',
        label: '字典'
      }, {
        value: '4',
        label: '自定义'
      }],
      dictList: [],
      form: {
        companyIds: ''
      },
      user: {},
      userId: null,
      isShowColumnTable: true,
      isEditOrder: false,
      sortable: null // 拖拽对象
    }
  },
  created() {
    getDict1({ size: 999 }).then(res => {
      this.dictList = res.data.content
    })
    this.user = this.$store.state.user.user
  },
  methods: {
    submit() {
      if (this.form.companyIds.length === 0) {
        this.$message.error('请至少选择一家公司')
        return false
      }
      if (this.headerInfo) {
        this.form.url = this.headerInfo.path
        this.form.modelName = this.headerInfo.name
      } else {
        const { path } = this.$parent.$parent.crud.headerInfo
        this.form.url = path
        if (this.modelName) {
          this.form.modelName = this.modelName
        } else {
          this.form.modelName = this.$parent.$parent.$options.name
        }
      }
      this.form.userId = this.user.userId
      syncHeaderPropertiesToChildCompany(this.form).then(res => {
        if (res.status === 200) {
          this.$message.success(res.msg)
          this.companyShow = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    upPosition(index, row) {
      //交换顺序
      const temp = this.columns[index  - 1]
      this.$set(this.columns, index - 1, this.columns[index])
      this.$set(this.columns, index, temp)
      this.$emit('update:columns', this.columns)
    },
    downPosition(index, row) {
      //交换顺序
      const temp = this.columns[index  + 1]
      this.$set(this.columns, index + 1, this.columns[index])
      this.$set(this.columns, index, temp)
      this.$emit('update:columns', this.columns)
    },
    save() {
      this.$emit('tabSave', '1')
    },
    // 初始化拖拽
    // initSortable() {
    //   const th = this
    //   const el = document.querySelector('.tableConfig .el-table__body-wrapper tbody')
    //   console.log(el)
    //   // 创建拖拽对象
    //   new Sortable(el, {
    //     onEnd(evt) {
    //       const { newIndex, oldIndex, item } = evt
    //       const column = th.columns[oldIndex]
    //       th.columns.splice(oldIndex, 1)
    //       th.columns.splice(newIndex, 0, column)
    //       th.crud.toUpdateHeader()
    //       th.handleCancelSort()
    //     }
    //   })
    // },
    // handleCancelSort() {
    //   // 使table先隐藏，再显示，table将恢复拖拽之前的样式
    //   this.isShowColumnTable = false
    //   setTimeout(() => {
    //     this.isShowColumnTable = true
    //     // 必须延时，否则重新初始化的sortable无法拖拽
    //     setTimeout(() => {
    //       this.initSortable()
    //     }, 500)
    //   }, 100)
    // },
    handleCheckedCitiesChange() {
      // this.columns.forEach(item=>{item.showName=item.label})
      this.$emit('pit', '1')
    }
  }
}
</script>

<style scoped>
.btnBox{
  padding: 10px 20px;
}
.upPosition_box{
  position: absolute;
  right: 0;
  top: -3px;
  height: 40px;
  .upPosition{
    color:green;
    font-size: 17px;
    cursor: pointer;
    max-width: 10px;
    height: 20px;
  }
}

</style>
